<template>
  <div class="complaint-management">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>投诉处理管理</span>
          <el-button-group>
            <el-button type="primary" @click="handleBatchProcess"
              >批量处理</el-button
            >
            <el-button type="success" @click="exportData">导出数据</el-button>
          </el-button-group>
        </div>
      </template>

      <!-- 搜索栏 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="订单号">
          <el-input v-model="searchForm.orderNo" placeholder="请输入订单号" />
        </el-form-item>
        <el-form-item label="投诉类型">
          <el-select
            v-model="searchForm.complaintType"
            placeholder="请选择投诉类型"
          >
            <el-option label="门票相关" value="ticket" />
            <el-option label="体验相关" value="experience" />
            <el-option label="商品相关" value="product" />
          </el-select>
        </el-form-item>
        <el-form-item label="处理状态">
          <el-select v-model="searchForm.status" placeholder="请选择处理状态">
            <el-option label="待处理" value="pending" />
            <el-option label="处理中" value="processing" />
            <el-option label="已处理" value="resolved" />
            <el-option label="已关闭" value="closed" />
          </el-select>
        </el-form-item>
        <el-form-item label="投诉时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 数据表格 -->
      <el-table
        v-loading="loading"
        :data="sortedComplaintList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="complaintNo" label="投诉编号" width="180" />
        <el-table-column prop="orderNo" label="订单编号" width="180" />
        <el-table-column prop="type" label="投诉类型" width="120">
          <template #default="{ row }">
            <el-tag>{{ getComplaintTypeLabel(row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          label="投诉内容"
          min-width="200"
          show-overflow-tooltip
        />
        <el-table-column
          prop="submitTime"
          label="投诉时间"
          width="160"
          sortable="custom"
        />
        <el-table-column prop="status" label="处理状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTag(row.status)">
              {{ getStatusLabel(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="priority"
          label="优先级"
          width="100"
          sortable="custom"
        >
          <template #default="{ row }">
            <el-tag :type="getPriorityTag(row.priority)">
              {{ getPriorityLabel(row.priority) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button-group>
              <el-button
                type="primary"
                size="small"
                :disabled="row.status === 'resolved' || row.status === 'closed'"
                @click="handleProcess(row)"
              >
                处理
              </el-button>
              <el-button type="info" size="small" @click="viewDetail(row)">
                详情
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
        
        <template #empty>
          <div class="empty-state">
            <el-empty 
              description="暂无投诉数据" 
              :image-size="200"
            >
              <div class="empty-text">暂无用户投诉</div>
              <div class="empty-subtext">所有用户投诉将在此处显示</div>
            </el-empty>
          </div>
        </template>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 处理对话框 -->
    <el-dialog
      v-model="processDialogVisible"
      title="处理投诉"
      width="600px"
      :append-to-body="true"
      :lock-scroll="true"
      destroy-on-close
      class="complaint-dialog"
    >
      <el-scrollbar height="calc(90vh - 200px)">
        <div class="process-form">
          <el-form
            ref="formRef"
            :model="processForm"
            :rules="processRules"
            label-width="100px"
          >
            <el-form-item label="处理方式" prop="processType">
              <el-select
                v-model="processForm.processType"
                placeholder="请选择处理方式"
              >
                <el-option label="道歉和解释" value="apology" />
                <el-option label="赔偿处理" value="compensation" />
                <el-option label="更换服务" value="service_change" />
                <el-option label="全额退款" value="full_refund" />
                <el-option label="部分退款" value="partial_refund" />
                <el-option label="其他" value="others" />
              </el-select>
            </el-form-item>
            <el-form-item label="处理结果" prop="result">
              <el-radio-group v-model="processForm.result">
                <el-radio label="resolved">已解决</el-radio>
                <el-radio label="closed">关闭处理</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="退款金额"
              prop="refundAmount"
              v-if="
                processForm.processType === 'full_refund' ||
                processForm.processType === 'partial_refund'
              "
            >
              <el-input-number
                v-model="processForm.refundAmount"
                :min="0"
                :precision="2"
                :step="0.1"
                style="width: 200px"
              />
            </el-form-item>
            <el-form-item label="处理说明" prop="comment">
              <el-input
                v-model="processForm.comment"
                type="textarea"
                :rows="4"
                placeholder="请输入处理说明"
              />
            </el-form-item>
            <el-form-item label="处理凭证" prop="attachments">
              <el-upload
                action="/api/admin/upload"
                list-type="picture-card"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-success="handleSuccess"
                multiple
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item label="通知用户">
              <el-switch v-model="processForm.notifyUser" />
            </el-form-item>
          </el-form>
        </div>
      </el-scrollbar>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="processDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitProcess">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="投诉详情"
      width="800px"
      :append-to-body="true"
      :lock-scroll="true"
      destroy-on-close
      class="complaint-dialog"
    >
      <el-scrollbar height="calc(90vh - 200px)">
        <div class="detail-content">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="投诉编号">{{
              currentComplaint.complaintNo
            }}</el-descriptions-item>
            <el-descriptions-item label="订单编号">{{
              currentComplaint.orderNo
            }}</el-descriptions-item>
            <el-descriptions-item label="投诉类型">
              <el-tag>{{
                getComplaintTypeLabel(currentComplaint.type)
              }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="投诉时间">{{
              currentComplaint.submitTime
            }}</el-descriptions-item>
            <el-descriptions-item label="处理状态">
              <el-tag :type="getStatusTag(currentComplaint.status)">
                {{ getStatusLabel(currentComplaint.status) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="优先级">
              <el-tag :type="getPriorityTag(currentComplaint.priority)">
                {{ getPriorityLabel(currentComplaint.priority) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="投诉内容" :span="2">
              {{ currentComplaint.content }}
            </el-descriptions-item>
            <el-descriptions-item label="投诉材料" :span="2">
              <div class="complaint-materials">
                <el-image
                  v-for="(url, index) in currentComplaint.materials"
                  :key="index"
                  :src="url"
                  :preview-src-list="currentComplaint.materials"
                  fit="cover"
                  class="material-image"
                />
              </div>
            </el-descriptions-item>
          </el-descriptions>

          <div class="process-history mt-4">
            <h4>处理记录</h4>
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in currentComplaint.processHistory"
                :key="index"
                :timestamp="activity.time"
                :type="activity.type"
              >
                <h4>{{ activity.title }}</h4>
                <p>{{ activity.content }}</p>
                <div
                  v-if="activity.materials?.length"
                  class="history-materials"
                >
                  <el-image
                    v-for="(url, mIndex) in activity.materials"
                    :key="mIndex"
                    :src="url"
                    :preview-src-list="activity.materials"
                    fit="cover"
                    class="material-image-small"
                  />
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>

          <div class="order-info mt-4">
            <h4>订单信息</h4>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="商品名称">{{
                currentComplaint.productName
              }}</el-descriptions-item>
              <el-descriptions-item label="订单金额"
                >¥{{
                  currentComplaint.orderAmount?.toFixed(2)
                }}</el-descriptions-item
              >
              <el-descriptions-item label="下单时间">{{
                currentComplaint.orderTime
              }}</el-descriptions-item>
              <el-descriptions-item label="支付方式">{{
                currentComplaint.paymentMethod
              }}</el-descriptions-item>
              <el-descriptions-item label="联系人">{{
                currentComplaint.contactName
              }}</el-descriptions-item>
              <el-descriptions-item label="联系电话">{{
                currentComplaint.contactPhone
              }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import axios from "@/api/axios";
import * as XLSX from "xlsx";

// 搜索表单
const searchForm = reactive({
  orderNo: "",
  complaintType: "",
  status: "",
  dateRange: [],
});

// 表格数据
const loading = ref(false);
const complaintList = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const selectedComplaints = ref([]);

// 处理对话框
const processDialogVisible = ref(false);
const formRef = ref(null);
const processForm = reactive({
  processType: "",
  result: "",
  refundAmount: 0,
  comment: "",
  notifyUser: false,
  attachments: []
});

// 处理表单验证规则
const processRules = {
  processType: [
    { required: true, message: "请选择处理方式", trigger: "change" },
  ],
  result: [{ required: true, message: "请选择处理结果", trigger: "change" }],
  refundAmount: [
    { required: true, message: "请输入退款金额", trigger: "blur" },
  ],
  comment: [{ required: true, message: "请输入处理说明", trigger: "blur" }],
};

// 详情对话框
const detailDialogVisible = ref(false);
const currentComplaint = ref({});

// 排序相关
const sortConfig = reactive({
  prop: "submitTime",
  order: "descending",
});

// 获取投诉类型标签
const getComplaintTypeLabel = (type) => {
  const types = {
    ticket: "门票相关",
    experience: "体验相关",
    product: "商品相关",
  };
  return types[type] || type;
};

// 获取状态标签
const getStatusLabel = (status) => {
  const statuses = {
    pending: "待处理",
    processing: "处理中",
    resolved: "已处理",
    closed: "已关闭",
  };
  return statuses[status] || status;
};

// 获取状态标签样式
const getStatusTag = (status) => {
  const statuses = {
    pending: "warning",
    processing: "primary",
    resolved: "success",
    closed: "info",
  };
  return statuses[status] || "";
};

// 获取优先级标签
const getPriorityLabel = (priority) => {
  const priorities = {
    high: "高",
    medium: "中",
    low: "低",
  };
  return priorities[priority] || priority;
};

// 获取优先级标签样式
const getPriorityTag = (priority) => {
  const priorities = {
    high: "danger",
    medium: "warning",
    low: "info",
  };
  return priorities[priority] || "";
};

// 搜索
const handleSearch = () => {
  currentPage.value = 1;
  fetchData();
};

// 重置搜索
const resetSearch = () => {
  Object.keys(searchForm).forEach((key) => {
    searchForm[key] = "";
  });
  handleSearch();
};

// 处理选择变化
const handleSelectionChange = (val) => {
  selectedComplaints.value = val;
};

// 批量处理
const handleBatchProcess = () => {
  if (selectedComplaints.value.length === 0) {
    ElMessage.warning("请选择要处理的投诉");
    return;
  }
  
  ElMessageBox.confirm(
    `确定要批量处理选中的 ${selectedComplaints.value.length} 条投诉吗？`,
    "批量处理",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(async () => {
      try {
        loading.value = true;
        const ids = selectedComplaints.value.map((item) => item.id);
        
        // 调用批量处理API
        await axios.post("/admin/complaints/batch-process", { ids, status: "processing" });
        
        ElMessage.success("批量处理成功");
        fetchData();
      } catch (error) {
        console.error("批量处理失败：", error);
        ElMessage.error("批量处理失败，请稍后重试");
      } finally {
        loading.value = false;
      }
    })
    .catch(() => {});
};

// 导出数据
const exportData = () => {
  // 制作导出数据
  const exportData = complaintList.value.map(complaint => {
    return {
      '投诉编号': complaint.complaintNo,
      '订单编号': complaint.orderNo,
      '投诉类型': getComplaintTypeLabel(complaint.type),
      '投诉内容': complaint.content,
      '投诉时间': complaint.submitTime,
      '处理状态': getStatusLabel(complaint.status),
      '优先级': getPriorityLabel(complaint.priority),
      '联系人': complaint.contactName,
      '联系电话': complaint.contactPhone,
      '商品名称': complaint.productName,
      '订单金额': complaint.orderAmount ? `¥${complaint.orderAmount.toFixed(2)}` : '-'
    };
  });

  // 创建工作簿
  const worksheet = XLSX.utils.json_to_sheet(exportData);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "投诉数据");
  
  // 设置列宽
  const colWidth = [
    { wch: 15 }, // 投诉编号
    { wch: 15 }, // 订单编号
    { wch: 12 }, // 投诉类型
    { wch: 40 }, // 投诉内容
    { wch: 20 }, // 投诉时间
    { wch: 10 }, // 处理状态
    { wch: 8 }, // 优先级
    { wch: 10 }, // 联系人
    { wch: 15 }, // 联系电话
    { wch: 20 }, // 商品名称
    { wch: 12 }, // 订单金额
  ];
  worksheet['!cols'] = colWidth;
  
  // 导出文件
  const now = new Date();
  const fileName = `投诉数据_${now.getFullYear()}${(now.getMonth()+1).toString().padStart(2, '0')}${now.getDate().toString().padStart(2, '0')}.xlsx`;
  XLSX.writeFile(workbook, fileName);
  
  ElMessage.success("导出成功");
};

// 处理单个投诉
const handleProcess = (row) => {
  currentComplaint.value = row;
  processForm.processType = "";
  processForm.result = "";
  processForm.refundAmount = 0;
  processForm.comment = "";
  processForm.notifyUser = false;
  processForm.attachments = [];
  processDialogVisible.value = true;
};

// 查看详情
const viewDetail = async (row) => {
  try {
    loading.value = true;
    // 获取投诉详情
    const response = await axios.get(`/admin/complaints/${row.id}`);
    currentComplaint.value = response || row;
  } catch (error) {
    console.error("获取投诉详情失败：", error);
    // 如果API失败，使用传入的行数据
    currentComplaint.value = row;
  } finally {
    loading.value = false;
    detailDialogVisible.value = true;
  }
};

// 提交处理
const submitProcess = () => {
  formRef.value?.validate(async (valid) => {
    if (valid) {
      try {
        loading.value = true;
        
        const data = {
          id: currentComplaint.value.id,
          processType: processForm.processType,
          result: processForm.result,
          refundAmount: processForm.processType.includes('refund') ? processForm.refundAmount : undefined,
          comment: processForm.comment,
          notifyUser: processForm.notifyUser,
          attachments: processForm.attachments.map(item => item.url)
        };
        
        // 调用处理投诉API
        await axios.post("/admin/complaints/process", data);
        
        ElMessage.success("处理成功");
        processDialogVisible.value = false;
        fetchData();
      } catch (error) {
        console.error("处理失败：", error);
        ElMessage.error("处理失败");
      } finally {
        loading.value = false;
      }
    }
  });
};

// 文件上传相关方法
const handlePreview = (file) => {
  window.open(file.url);
};

const handleRemove = (file, fileList) => {
  processForm.attachments = fileList;
};

const beforeRemove = (file, fileList) => {
  return ElMessageBox.confirm(`确定移除 ${file.name}？`);
};

const handleSuccess = (response, file, fileList) => {
  processForm.attachments = fileList;
};

// 分页相关方法
const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchData();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchData();
};

// 处理排序变化
const handleSortChange = ({ prop, order }) => {
  sortConfig.prop = prop;
  sortConfig.order = order;
  fetchData();
};

// 获取排序后的数据
const sortedComplaintList = computed(() => {
  const list = [...complaintList.value];
  if (!sortConfig.prop) return list;

  return list.sort((a, b) => {
    let aValue = a[sortConfig.prop];
    let bValue = b[sortConfig.prop];

    // 处理优先级排序
    if (sortConfig.prop === "priority") {
      const priorityOrder = { high: 3, medium: 2, low: 1 };
      aValue = priorityOrder[aValue] || 0;
      bValue = priorityOrder[bValue] || 0;
    }

    // 处理时间排序
    if (sortConfig.prop === "submitTime") {
      aValue = new Date(aValue).getTime();
      bValue = new Date(bValue).getTime();
    }

    if (sortConfig.order === "ascending") {
      return aValue > bValue ? 1 : -1;
    } else {
      return aValue < bValue ? 1 : -1;
    }
  });
});

// 获取数据列表
const fetchData = async () => {
  loading.value = true;
  try {
    // 构建请求参数
    const params = {
      page: currentPage.value,
      size: pageSize.value,
      orderNo: searchForm.orderNo || undefined,
      complaintType: searchForm.complaintType || undefined,
      status: searchForm.status || undefined,
      startDate: searchForm.dateRange && searchForm.dateRange[0] ? searchForm.dateRange[0] : undefined,
      endDate: searchForm.dateRange && searchForm.dateRange[1] ? searchForm.dateRange[1] : undefined,
      sortField: sortConfig.prop,
      sortOrder: sortConfig.order,
    };

    // 调用API获取数据
    const response = await axios.get("/admin/complaints", { params });
    
    // 检查响应是否存在
    if (response) {
      // 不管是否有数据，都使用后端返回的结果
      complaintList.value = Array.isArray(response.records) ? response.records : [];
      total.value = response.total || 0;
    } else {
      // 响应对象不存在，设置为空数组
      complaintList.value = [];
      total.value = 0;
    }
  } catch (error) {
    console.error("获取投诉列表失败：", error);
    ElMessage.error("获取数据失败");
    
    complaintList.value = [
      {
        id: "C202403150001",
        complaintNo: "C202403150001",
        orderNo: "TK202403150001",
        type: "ticket",
        content: "景区内部分设施未开放，但官网上没有提前说明，严重影响游玩体验。购买门票时未说明部分项目限制，导致多人出行不能全部参与活动。",
        submitTime: "2024-03-15 09:30:00",
        status: "pending",
        priority: "high",
        productName: "贵港园博园门票",
        orderAmount: 128.0,
        orderTime: "2024-03-15 09:00:00",
        contactName: "张三",
        contactPhone: "13800138001",
        contactEmail: "zhangsan@example.com",
        materials: [
          "https://example.com/complaint1-1.jpg",
          "https://example.com/complaint1-2.jpg",
          "https://example.com/complaint1-3.jpg"
        ],
        processHistory: []
      },
      {
        id: "C202403120002",
        complaintNo: "C202403120002",
        orderNo: "TK202403120002",
        type: "experience",
        content: "预订的美食体验活动质量与描述严重不符，菜品种类比官网展示的少了三种，且口味与当地特色不符，感觉被欺骗。",
        submitTime: "2024-03-12 14:25:00",
        status: "processing",
        priority: "medium",
        productName: "贵港传统美食文化体验",
        orderAmount: 298.0,
        orderTime: "2024-03-11 16:40:00",
        contactName: "李四",
        contactPhone: "13900139002",
        contactEmail: "lisi@example.com",
        materials: [
          "https://example.com/complaint2-1.jpg",
          "https://example.com/complaint2-2.jpg"
        ],
        processHistory: [
          {
            processType: "service_change",
            processTime: "2024-03-12 16:30:00",
            processor: "王经理",
            comment: "已联系客户了解情况，将安排重新体验或退款处理",
            status: "processing"
          }
        ]
      },
      {
        id: "C202403080003",
        complaintNo: "C202403080003",
        orderNo: "TK202403070003",
        type: "product",
        content: "在景区内购买的纪念品质量极差，使用不到一天就损坏了。且售后电话无人接听，非常影响游玩心情。",
        submitTime: "2024-03-08 11:15:00",
        status: "resolved",
        priority: "medium",
        productName: "贵港特色手工艺品",
        orderAmount: 89.0,
        orderTime: "2024-03-07 15:20:00",
        contactName: "王五",
        contactPhone: "13700137003",
        contactEmail: "wangwu@example.com",
        materials: [
          "https://example.com/complaint3-1.jpg",
          "https://example.com/complaint3-2.jpg",
          "https://example.com/complaint3-3.jpg",
          "https://example.com/complaint3-4.jpg"
        ],
        processHistory: [
          {
            processType: "compensation",
            processTime: "2024-03-08 14:20:00",
            processor: "李客服",
            comment: "联系了商家，确认产品质量问题，同意全额退款并赠送新品一件",
            status: "processing"
          },
          {
            processType: "compensation",
            processTime: "2024-03-09 10:30:00",
            processor: "赵主管",
            comment: "已完成退款并安排赠品配送，客户表示满意",
            status: "resolved",
            attachments: [
              "https://example.com/refund-proof.jpg"
            ]
          }
        ]
      },
      {
        id: "C202403010004",
        complaintNo: "C202403010004",
        orderNo: "TK202402280004",
        type: "ticket",
        content: "预订电子票无法正常使用，到景区后扫码显示无效，工作人员态度恶劣，浪费了大量时间，严重影响旅行计划。",
        submitTime: "2024-03-01 09:45:00",
        status: "closed",
        priority: "high",
        productName: "石蟆风景区门票",
        orderAmount: 150.0,
        orderTime: "2024-02-28 20:15:00",
        contactName: "赵六",
        contactPhone: "13600136004",
        contactEmail: "zhaoliu@example.com",
        materials: [
          "https://example.com/complaint4-1.jpg"
        ],
        processHistory: [
          {
            processType: "apology",
            processTime: "2024-03-01 10:30:00",
            processor: "张客服",
            comment: "已联系客户，核实系统临时故障导致验票问题",
            status: "processing"
          },
          {
            processType: "full_refund",
            processTime: "2024-03-01 15:20:00",
            processor: "陈经理",
            comment: "确认系统问题，已为客户全额退款并赠送下次游玩门票",
            status: "processing",
            refundAmount: 150.0
          },
          {
            processType: "full_refund",
            processTime: "2024-03-02 09:00:00",
            processor: "系统",
            comment: "退款已到账，订单处理完成",
            status: "closed",
            attachments: [
              "https://example.com/refund-proof2.jpg"
            ]
          }
        ]
      }
    ];
    total.value = complaintList.value.length;
  } finally {
    loading.value = false;
  }
};

// 页面加载时获取数据
onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.complaint-management {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.complaint-materials,
.history-materials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}

.material-image {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  cursor: pointer;
}

.material-image-small {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  cursor: pointer;
}

.mt-4 {
  margin-top: 20px;
}

.process-history,
.order-info {
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.complaint-dialog :deep(.el-dialog__body) {
  padding: 0;
}

.complaint-dialog .process-form,
.complaint-dialog .detail-content {
  padding: 20px;
}

.complaint-dialog :deep(.el-scrollbar__wrap) {
  overflow-x: hidden;
}

.empty-state {
  padding: 40px 0;
}

.empty-text {
  font-size: 16px;
  color: var(--el-text-color-secondary);
  margin-top: 10px;
}

.empty-subtext {
  font-size: 14px;
  color: var(--el-text-color-placeholder);
  margin-top: 5px;
}
</style>
